<template>
  <view class="login-container">
    <!-- 装饰背景 -->
    <view class="decor-background"></view>

    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- Logo -->
      <view class="logo-box">
        <image class="logo-image" src="/static/logo.png" mode="aspectFit" />
      </view>

      <!-- 表单区域 -->
      <view class="form-container">
        <!-- 用户名输入 -->
        <view class="form-item">
          <input
            v-model="formData.username"
            class="form-input"
            placeholder="请输入账号"
            placeholder-class="placeholder-style"
          />
          <view class="cuIcon-people input-icon"></view>
        </view>

        <!-- 密码输入 -->
        <view class="form-item">
          <input
            v-model="formData.password"
            password
            class="form-input"
            placeholder="请输入密码"
            placeholder-class="placeholder-style"
          />
          <view class="cuIcon-lock input-icon"></view>
        </view>

        <!-- 用户类型选择 -->
        <!-- <view class="form-item">
          <picker
            class="role-picker"
            @change="optionsChange"
            :value="index"
            :range="options"
          >
            <view class="picker-content">
              {{ options[index] }}
              <view class="cuIcon-unfold"></view>
            </view>
          </picker>
        </view> -->
       <!-- <view class="form-item">
          <view class="captcha-container">
            <input
              v-model="formData.code"
              class="input-field captcha-input"
              placeholder="请输入验证码"
              placeholder-class="placeholder-style"
            />
            <image
              :src="captchaImage"
              class="captcha-image"
              @click="refreshCaptcha"
              mode="widthFix"
            />
          </view>
        </view> -->
        <!-- 登录按钮 -->
        <view class="form-item">
          <button class="login-btn" @tap="onLoginTap">立即登录</button>
        </view>

        <!-- 辅助链接 -->
        <view class="action-links">
          <text class="link-item" @tap="onRegisterTap('yonghu')">注册账号</text>
          <!-- <text class="link-divider">|</text> -->
          <!-- <text class="link-item" @tap="onForgetTap">忘记密码</text> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import menu from "@/utils/menu";

export default {
  data() {
    return {
      username: "yonghu",
      password: "admin123",
      formData: {
        username: "yonghu",
        password: "admin123",
      },
      options: ["农户", "用户", "卖家"],
      optionsValues: [
        "nonghu",
        // 'nonghu',
        "yonghu",
        "maijia",
      ],
      index: 0,
      captchaImage: "",
    };
  },
  onLoad() {
    // let options = ['请选择登录用户类型'];

    // this.options = options;

    this.styleChange();
    this.refreshCaptcha();
  },
  methods: {
    async refreshCaptcha() {
      console.log(123123);
      let that = this;
      try {
        let res = await that.$api.getCaptchaImage();

        if (res.code == 200) {
          this.captchaImage = "data:image/gif;base64," + res.img;
          this.formData.uuid = res.uuid;
        }
      } catch (error) {
        //TODO handle the exception
      }
    },
    styleChange() {
      this.$nextTick(() => {
        // document.querySelectorAll('.uni-input .uni-input-input').forEach(el=>{
        //   el.style.backgroundColor = this.loginFrom.content.input.backgroundColor
        // })
      });
    },
    onRegisterTap(tableName) {
      uni.setStorageSync("loginTable", tableName);
      this.$utils.jump("../register/register");
    },
    onForgetTap() {
      this.$utils.jump("../forget/forget");
    },
    async onLoginTap() {
      // if (!this.optionsValues[this.index]) {
      //   this.$utils.msg("请选择登陆用户类型");
      //   return;
      // }
      let res = await this.$api.login(``, {
        ...this.formData,
      });
      // if (this.index == 0) {
      // 	getApp().globalData.tarList = [{
      // 		"pagePath": "/pages/index/index",
      // 		"iconPath": "/static/tabs/index.png",
      // 		"selectedIconPath": "/static/tabs/index1.png",
      // 		"text": "首页"
      // 	}, {
      // 		"pagePath": "/pages/schoolOverview/index",
      // 		"iconPath": "/static/tabs/icon1.png",
      // 		"selectedIconPath": "/static/tabs/icon1_act.png",
      // 		"text": "校园概况"
      // 	}, {
      // 		"pagePath": "/pages/infoRegister/index",
      // 		"iconPath": "/static/tabs/icon2.png",
      // 		"selectedIconPath": "/static/tabs/icon2_act.png",
      // 		"text": "信息登记"
      // 	}, {
      // 		"pagePath": "/pages/center/center",
      // 		"iconPath": "/static/tabs/mine.png",
      // 		"selectedIconPath": "/static/tabs/mine1.png",
      // 		"text": "我的"
      // 	}];
      // } else if (this.index == 1) {
      // 	getApp().globalData.tarList = [{
      // 		"pagePath": "/pages/index/index",
      // 		"iconPath": "/static/tabs/index.png",
      // 		"selectedIconPath": "/static/tabs/index1.png",
      // 		"text": "首页"
      // 	}, {
      // 		"pagePath": "/pages/infoAudit/index",
      // 		"iconPath": "/static/tabs/icon2.png",
      // 		"selectedIconPath": "/static/tabs/icon2_act.png",
      // 		"text": "信息审核"
      // 	}, {
      // 		"pagePath": "/pages/center/center",
      // 		"iconPath": "/static/tabs/mine.png",
      // 		"selectedIconPath": "/static/tabs/mine1.png",
      // 		"text": "我的"
      // 	}];
      // }
      if (res.code == 200) {
        uni.setStorageSync("token", res.token);
        this.getUserInfo();

        // uni.setStorageSync("nickname", this.username);
        // uni.setStorageSync("nowTable", `${this.optionsValues[this.index]}`);
        // res = await this.$api.session(`${this.optionsValues[this.index]}`);
        // // 保存用户id
        // uni.setStorageSync("userid", res.data.id);
        // uni.setStorageSync("role", `${this.options[this.index]}`);
       
      }
    },
    async getUserInfo() {
      try {
        let res = await this.$api.getUserInfo();
        if (res.code == 200) {
          uni.setStorageSync("userInfo", res.user);
          uni.setStorageSync("roles", res.roles[0]);
		  
          if (res.roles[0] == "nonghu") {
            // if (this.index == 0) {
				console.log('res.roles[0]',res.roles[0]);
            getApp().globalData.tarList = [
              {
                pagePath: "/pages/newsList/newsList",
                iconPath: "/static/tabs/index.png",
                selectedIconPath: "/static/tabs/index1.png",
                text: "咨讯概览",
              },
              {
                pagePath: "/pages/chatList/chatList",
                iconPath: "/static/tabs/icon1.png",
                selectedIconPath: "/static/tabs/icon1_act.png",
                text: "消息",
              },

              {
                pagePath: "/pages/center/center",
                iconPath: "/static/tabs/mine.png",
                selectedIconPath: "/static/tabs/mine1.png",
                text: "我的",
              },
            ];
			 this.$utils.tab("../newsList/newsList");
          } else {
            getApp().globalData.tarList = [
              {
                pagePath: "/pages/index/index",
                iconPath: "/static/tabs/index.png",
                selectedIconPath: "/static/tabs/index1.png",
                text: "商品",
              },
              {
                pagePath: "/pages/chatList/chatList",
               iconPath: "/static/tabs/icon1.png",
               selectedIconPath: "/static/tabs/icon1_act.png",
                text: "消息",
              },

              {
                pagePath: "/pages/center/center",
                iconPath: "/static/tabs/mine.png",
                selectedIconPath: "/static/tabs/mine1.png",
                text: "我的",
              },
            ];
			 this.$utils.tab("../index/index");
          }
         
        }
      } catch (error) {
        //TODO handle the exception
      }
    },
    optionsChange(e) {
      this.index = e.target.value;
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.decor-background {
  // position: absolute;
  // width: 120%;
  // height: 120%;
  background: linear-gradient(
    45deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  );
  transform: rotate(-5deg);
  top: -10%;
}

.login-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  width: 85%;
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.2);
  z-index: 1;
}

.logo-box {
  text-align: center;
  margin-bottom: 60rpx;

  .logo-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
  }
}

.form-container {
  .form-item {
    margin-bottom: 48rpx;
    position: relative;
  }
}

.form-input {
  background: rgba(255, 255, 255, 0.9);
  border: 2rpx solid #e2e8f0;
  border-radius: 48rpx;
  height: 96rpx;
  padding: 0 96rpx 0 40rpx;
  font-size: 30rpx;
  color: #2d3748;
  transition: all 0.3s;

  &:focus {
    border-color: #667eea;
    box-shadow: 0 0 16rpx rgba(102, 126, 234, 0.2);
  }
}

.input-icon {
  position: absolute;
  right: 32rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40rpx;
  color: #667eea;
}

.role-picker {
  .picker-content {
    background: rgba(102, 126, 234, 0.1);
    border-radius: 48rpx;
    height: 96rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #667eea;
    font-size: 30rpx;

    .cuIcon-unfold {
      font-size: 36rpx;
    }
  }
}

.login-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  height: 96rpx;
  border-radius: 48rpx;
  font-size: 34rpx;
  letter-spacing: 2rpx;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
  transition: all 0.2s;

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

.action-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;

  .link-item {
    color: #667eea;
    font-size: 28rpx;
    padding: 0 24rpx;
    transition: all 0.2s;

    &:active {
      opacity: 0.7;
    }
  }

  .link-divider {
    color: #cbd5e0;
    font-size: 24rpx;
  }
}

.placeholder-style {
  color: #a0aec0;
}

.captcha-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.captcha-input {
  width: 500rpx;
  padding-left: 15rpx;
  height: 80rpx;
  // flex: 1;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 2rpx solid #e2e8f0;
  border-radius: 48rpx;
}

.captcha-image {
  width: 300rpx;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  object-fit: cover;
}
</style>
